<template>
	<div class="updatePasswordContainer">
		<div class="updatePasswordHeaderContainer">
			<login-header :is-login-register-btn="isLoginRegisterBtn">
				<span>找回密码</span>
			</login-header>
		</div>
		<div class="updatePasswordFrom">
			<div class="verifyUserNameContainer" v-show="!isUserNameVerifySuccess">
				<div class="cueWords font_size_15">
					<div>
						<i class="el-icon-info cueWordsIcon"></i> 请输入你需要找回登录密码的账户名
					</div>
				</div>
				<div class="verifyUserName">
					<!--用户名-->
					<el-row :gutter="20">
						<el-col :span="5" class="padding_right_0">
							<span class="input_label text_align_right">登录名：</span>
						</el-col>
						<el-col :span="19">
							<el-input placeholder="请输入登录名" v-model="ruleForm.userName" @blur="userNameInputBlur" clearable></el-input>
						</el-col>
					</el-row>
					<!--验证码-->
					<div class="verificationCodeContainer">
						<el-row :gutter="20">
							<el-col :span="5" class="padding_right_0">
								<span class="input_label_code text_align_right">验证码：</span>
							</el-col>
							<el-col :span="19">
								<div class="verificationCodeContent">

								</div>
							</el-col>
						</el-row>
						<div class="verifyCodeErrorMessage font_size_14" v-show="isVerifyCodeErrorMessage">{{codeErrorMessage}}</div>
					</div>
					<div class="submitBtn">
						<el-button type="primary" :disabled="isBtnDisabled" @click="submitFrom()">提&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;交</el-button>
					</div>
				</div>
			</div>
			<div class="updatePasswordFromContainer" v-show="isUserNameVerifySuccess">
				<div class="updatePasswordActive">
					<el-steps :active="updateActive" finish-status="success" align-center>
						<el-step title="身份验证"></el-step>
						<el-step title="找回密码"></el-step>
						<el-step title="完成"></el-step>
					</el-steps>
				</div>
				<div class="updatePasswordFromContent">
					<!--身份验证-->
					<div v-show="updateActive == 0">
						<!--提示语-->
						<div class="updatePasswordCueWords font_size_15">
							<div>
								手机验证码验证 账户
								<span class="cursor_pointer" style="color: #ee7a23;text-decoration:underline;">{{ cueUserName }}</span> 
								为确认是你本人操作，请完成以下验证
							</div>
						</div>
						<!--手机号码 验证-->
						<el-row :gutter="20" class="margin_bottom_15">
							<el-col :span="5" class="padding_right_0">
								<span class="input_label text_align_right">手机号码：</span>
							</el-col>
							<el-col :span="19">
								<span class="userTel input_label">*******{{userTelphone.substring(7)}}</span>
							</el-col>
						</el-row>
						<!--手机验证码-->
						<el-row :gutter="20" class="margin_bottom_15">
							<el-col :span="5" class="padding_right_0">
								<span class="input_label text_align_right">验证码：</span>
							</el-col>
							<el-col :span="8">
								<el-input type="text" placeholder="输入6位数验证码" v-model="ruleForm.codeTel" @blur="codeTelInputBlur" clearable></el-input>
							</el-col>
							<el-col :span="11">
								<el-button @click="getTelCode()" :disabled = "isTelCodeDisabled" :class="{countZeroColor : isCountZeroColor}" style = "width: 170px;">{{telCodeBtnData}}</el-button>
							</el-col>
						</el-row>
						<!--验证码发送成功提示-->
						<div class="telCodeSuccessMessage font_size_14" v-show="isTelCodeSuccessMessage">
							<i class="el-icon-success" style="color: #67C23A;"></i> 验证码已发送到您的手机，10分钟内输入有效，验证码就好像密码，打死也不能告诉别人
						</div>
						<!--错误信息-->
						<div class="telCodeErrorMessage font_size_14" v-show="isTelCodeErrorMessage">{{telErrorMessage}}</div>
					</div>
					<!--填写新密码-->
					<div v-show="updateActive == 1">
						<!--提示语-->
						<div class="updatePasswordCueWords font_size_15">
							<div>
								填写新密码
							</div>
						</div>
						<!--填写新密码-->
						<el-row :gutter="20" class="margin_bottom_15">
							<el-col :span="7" class="padding_right_0">
								<span class="input_label text_align_right">新密码：</span>
							</el-col>
							<el-col :span="12">
								<el-tooltip class="item" effect="dark" placement="right">
									<div slot="content">密码规则为：<br/>1、数字、大小写字母、符号至少两种组合的字符<br/>2、长度为8--15位</div>
									<el-input type="password" placeholder="输入新密码" v-model="ruleForm.newPassword" clearable></el-input>
								</el-tooltip>
							</el-col>
						</el-row>
						<!--新密码格式不对 为空的错误提示语-->
						<div class="newPasswordErrorDiv font_size_14 margin_bottom_10" v-show="isNewPasswordErrorMessage">{{newPasswordErrorMessage}}</div>
						<!--确认新密码-->
						<el-row :gutter="20" class="margin_bottom_15">
							<el-col :span="7" class="padding_right_0">
								<span class="input_label text_align_right">确认新密码：</span>
							</el-col>
							<el-col :span="12">
								<el-input type="password" v-model="ruleForm.verifyNewPassword" clearable></el-input>
							</el-col>
						</el-row>
						<!--两次密码不一致的错误提示语-->
						<div class="newPasswordErrorDiv font_size_14 margin_bottom_10" v-show="isNewPasswordVarianceErrorMessage">{{newPasswordVarianceErrorMessage}}</div>
					</div>
					<!--新密码更新完成-->
					<div v-show="updateActive == 3">
						<div class="updataPasswordSuccess text_align_center">
							<img src="../../static/images/icon_update_password_success.svg" alt="" />
							<h3 class="margin_top_10" style="color: #EE7A23;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码修改成功！！</h3>
						</div>
					</div>
				</div>
				<div class="updatePasswordBtn text_align_center">
					<el-button type="primary" @click="updatePassword()">{{updatePasswordBtnData}}</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<style>
	.updatePasswordContainer {}

	.updatePasswordHeaderContainer {
		box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
	}

	.updatePasswordFrom {
		width: 1200px;
		height: 500px;
		margin: 10px auto;
	}

	.verifyUserName {
		width: 400px;
		margin: 0px auto;
		margin-top: 35px;
	}

	.cueWords {
		margin-top: 40px;
		color: #6c6c6c;
		padding-left: 320px;
	}

	.cueWords .cueWordsIcon {
		color: #68B5E2;
	}

	.input_label {
		display: inline-block;
		width: 100%;
		height: 40px;
		line-height: 40px;
		color: #6c6c6c;
	}

	.input_label_code {
		display: inline-block;
		width: 100%;
		height: 70px;
		line-height: 70px;
		color: #6c6c6c;
	}

	.verifyUserNameContainer {
		height: 100%;
		padding: 10px;
		margin: 0px auto;
	}

	.verificationCodeContainer {
		margin-top: 15px;
	}

	.verifyCodeErrorMessage {
		padding-left: 55px;
		color: red;
	}

	.updatePasswordFromContainer {
		width: 900px;
		height: 100%;
		margin: 0px auto;
		margin-top: 70px;
	}

	.updatePasswordFromContent {
		width: 600px;
		margin: 0px auto;
		margin-top: 30px;
	}

	.updatePasswordCueWords {
		padding: 5px 10px;
		margin-bottom: 15px;
		color: #6C6C6C;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	.updatePasswordBtn {
		margin-top: 20px;
	}

	.updatePasswordBtn button {
		width: 210px;
	}

	.telCodeErrorMessage {
		padding-left: 80px;
		color: red;
	}

	.telCodeSuccessMessage {
		padding-left: 30px;
		color: #6C6C6C;
	}

	.countZeroColor {
		color: #ee7a23 !important;
	}

	.newPasswordErrorDiv{
		padding-left: 180px;
		color: red;
	}

	.submitBtn {
		margin-top: 15px;
	}

	.submitBtn button {
		width: 100%;
		font-size: 16px;
	}


</style>

<script type="text/ecmascript-6">
	import LoginHeader from "@/components/LoginHeader.vue"
	import axios from "axios"
	export default {
		data() {
			return {
				ruleForm: {
					userName: "",
					codeTel: "",
					newPassword : "",
					verifyNewPassword : ""
				},
				//用户绑定的手机号码
				userTelphone: "",
				//是否验证用户名成功
				isUserNameVerifySuccess: false,
				isBtnDisabled: true,
				isCodeVerifySuccess: false,
				//登录导航显示 登录 注册按钮
				isLoginRegisterBtn: true,
				//验证码验证错误信息
				isVerifyCodeErrorMessage: false,
				codeErrorMessage: "验证码错误",
				//找回密码 的 步骤值状态
				updateActive: 0,
				//找回密码 提示 是哪个账号要找回密码
				cueUserName: "",
				//获取短信验证码按钮的数值
				telCodeBtnData: "获取短信验证码",
				//获取的短信验证码  用于比对输入的验证码是否正确
				telCodeData: "",
				//短信验证码 错误信息
				isTelCodeErrorMessage: false,
				telErrorMessage: "",
				//在倒计时的时候 禁用 倒计时按钮
				isTelCodeDisabled : false,
				//改变 倒计时读秒的时候 字体验证
				isCountZeroColor : false,
				//验证码发送成功的 提示语
				isTelCodeSuccessMessage : false,
				//填写新密码 错误 提示语
				isNewPasswordErrorMessage : false,
				newPasswordErrorMessage : "",
				//两次密码不一致 错误提示语
				newPasswordVarianceErrorMessage : "两次密码输入不一致",
				isNewPasswordVarianceErrorMessage : false,
				//下一步 按钮 文字
				updatePasswordBtnData : "下 一 步"
			};
		},
		components: {
			//login header
			LoginHeader
		},
		mounted: function() {
			this.codeInit();
		},
		methods: {
			//验证码 初始化
			codeInit() {
				var _this = this;
				$(".verificationCodeContent").empty().initVerificationCode({
					codeWidth: 300,
					codeHeigth: 70,
					codeLength: 5,
					fontSize: 22,
					verifySuccess: function() {
						if(_this.ruleForm.userName != "") {
							_this.isBtnDisabled = false;
						}
						_this.isCodeVerifySuccess = true;
						_this.isVerifyCodeErrorMessage = false;
					},
					verifyError: function() {
						_this.isBtnDisabled = true;
						_this.isVerifyCodeErrorMessage = true;
					}
				});
			},
			//验证用户名
			submitFrom() {
				if ($(".fn_code_input").val() == "") {
					this.isVerifyCodeErrorMessage = true;
					this.codeErrorMessage = "验证码不能为空";
					return;
				}
				axios.post("/users/retrievePassVerifyUserName", {
					userName: this.ruleForm.userName
				}).then((response) => {
					var data = response.data;
					if(data.status == 0) {
						this.isUserNameVerifySuccess = true;
						//用户手机号
						this.userTelphone = data.result.userTelphone;
						//用户名
						this.cueUserName = data.result.userName;
					} else if(data.status == 1003) { //用户名不存在
						this.$alert(data.result, "", {
							confirmButtonText: "确定",
							showClose: false,
							type: "warning",
							center: true,
							callback: action => {
								this.ruleForm.userName = "";
								this.isBtnDisabled = true;
								this.isCodeVerifySuccess = false;
								this.codeInit();
							}
						});
					}
				});
			},
			userNameInputBlur() {
				if(this.isCodeVerifySuccess && this.ruleForm.userName != "") {
					this.isBtnDisabled = false;
				}
				if(this.ruleForm.userName == "") {
					this.isBtnDisabled = true;
				}
			},
			//找回密码的步骤  下一步
			updatePassword() {
				if (this.updateActive == 0) {
					if(this.ruleForm.codeTel == "") {
						this.isTelCodeErrorMessage = true;
						this.telErrorMessage = "验证码不能为空";
						return;
					}
					//验证 输入的 短信验证码 是否正确
					axios.post("/users/verifyTelCode", {
						codeTel: this.ruleForm.codeTel,
						telCodeData: this.telCodeData
					}).then((response) => {
						var data = response.data;
						if(data.status == 1) {
							this.isTelCodeErrorMessage = true;
							this.telErrorMessage = data.result.message;
							//清空输入
							this.ruleForm.codeTel = "";
						} else if(data.status == 0) {
							this.updateActive++;
						}
					});
				}else if (this.updateActive == 1) {
					//验证密码是否为空 和输入的密码是否符合规则
					if (this.ruleForm.newPassword == "") {
						this.isNewPasswordErrorMessage = true;
						this.newPasswordErrorMessage = "新密码输入不能为空";
						return;
					}else {
						this.isNewPasswordErrorMessage = false;
						//密码正则
						var regex = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?![,\.#%'\+\*\-:;^_`!@$]+$)[,\.#%'\+\*\-:;^_`!@$0-9A-Za-z]{8,15}$/;
						if (!regex.test(this.ruleForm.newPassword)) {
							this.isNewPasswordErrorMessage = true;
							this.newPasswordErrorMessage = "新密码输入格式不对";
							return;
						}else {
							this.isNewPasswordErrorMessage = false;
						}
					}

					//验证两次输入是否一直
					if (this.ruleForm.newPassword !== this.ruleForm.verifyNewPassword) {
						this.isNewPasswordVarianceErrorMessage = true;
						return;
					}else {
						this.isNewPasswordVarianceErrorMessage = false;
					}

					//密码输入验证通过
					axios.post("/users/updatePassword", {
						userName : this.ruleForm.userName,
						newPassword : this.$md5(this.ruleForm.newPassword),
						verifyNewPassword : this.$md5(this.ruleForm.verifyNewPassword)
					}).then((response) => {
						var data = response.data;
						if (data.status == 0) {
							this.updateActive++;
							this.updateActive++;
							this.updatePasswordBtnData = "去 登 陆";
						}else if (data.status == 1004) { // 新密码不能和老密码一样
							this.$alert(data.result.message, "", {
								confirmButtonText: "确定",
								showClose: false,
								type: "warning",
								center: true,
								callback: action => {
									this.ruleForm.newPassword = "";
									this.ruleForm.verifyNewPassword = "";
								}
							});
						}
					});
				}else if (this.updateActive == 3) {
					//修改成功 跳转登录页
					this.$router.push({
						path : "/Login"
					})
				}
			},
			//计时器
			setInterval (countNum) {
				var count = countNum;
				if (count == 0) {
					this.telCodeBtnData = "重新获取短信验证码";
					//去掉 读秒时的字体颜色
					this.isCountZeroColor = false;
					//去掉禁用按钮
					this.isTelCodeDisabled = false;
					//清除计时器
					clearInterval(this.interval);
				}else {
					//改变 读秒时的 字体颜色
					this.isCountZeroColor = true;
					//验证码发送成功 显示 成功提示信息
					this.isTelCodeSuccessMessage = true;
					this.telCodeBtnData = count + "s";
				}
			},
			//获取手机验证码
			getTelCode() {
				//禁用按钮
				this.isTelCodeDisabled = true;
				//获取短信验证码
				axios.get("/users/getTelCode", {
					params: {
						userTelphone: this.userTelphone
					}
				}).then((response) => {
					var data = response.data;
					if(data.status == 0) {
						this.telCodeData = data.result.telCode;
						//计时器
						var count = 60;
						this.interval = setInterval(()=>{
							this.setInterval (count);
							count--;
						},1000);
					}
				});
			},
			//短信验证码输入框 blur
			codeTelInputBlur() {

			}
		}
	}
</script>
